<template>
  <div class="kjk">
    <a-typography-title :level="4" class="header">
      养生学堂
    </a-typography-title>
    <div class="cont">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in imgList"
          :key="index"
          class="swipeItem"
        >
          <img :src="item" class="imgc" />
        </van-swipe-item>
      </van-swipe>
      <a-flex
        v-for="(item, index) in dataList"
        :key="index"
        class="itemContainer"
      >
        <img :src="item.goodsPhoto" class="img80" />
        <a-flex class="fr">
          <a-typography-text class="goodsName">{{
            item.goodsName
          }}</a-typography-text>
          <a-typography-text class="goodsSubtitle">{{
            item.time
          }}</a-typography-text>
        </a-flex>
      </a-flex>
      
    </div>
    <div class="ymba" @click="gob">浙ICP备17027313号-2</div>
    <!-- <Menu /> -->
  </div>
</template>
  
  <script setup >
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant'
import Menu from '@/components/menus/index.vue'

const route = useRoute()
const router = useRouter()
const imgList = [
  'https://q1.itc.cn/q_70/images01/20240519/f9b961385c5a4130860d898e8577f9a0.png',
  'https://pic.quanjing.com/be/hk/QJ6538438486.jpg@%21350h',
  'https://img95.699pic.com/xsj/07/78/tc.jpg%21/fh/300',
]
const dataList = ref([
  {
    id: 1,
    goodsName: '夏季养生需要注意的事项有哪些，不要贪凉',
    goodsPhoto:
      'https://pic4.zhimg.com/v2-4d9e9f936b9968f53be22b594aafa74f_r.jpg',
    time: '2025-02-02',
  },
  {
    id: 1,
    goodsName: '夏季养生需要注意的事项有哪些，不要贪凉',
    goodsPhoto:
      'https://pic4.zhimg.com/v2-4d9e9f936b9968f53be22b594aafa74f_r.jpg',
    time: '2025-02-02',
  },
  {
    id: 1,
    goodsName: '夏季养生需要注意的事项有哪些，不要贪凉',
    goodsPhoto:
      'https://pic4.zhimg.com/v2-4d9e9f936b9968f53be22b594aafa74f_r.jpg',
    time: '2025-02-02',
  },
  {
    id: 1,
    goodsName: '夏季养生需要注意的事项有哪些，不要贪凉',
    goodsPhoto:
      'https://pic4.zhimg.com/v2-4d9e9f936b9968f53be22b594aafa74f_r.jpg',
    time: '2025-02-02',
  },
  {
    id: 1,
    goodsName: '夏季养生需要注意的事项有哪些，不要贪凉',
    goodsPhoto:
      'https://pic4.zhimg.com/v2-4d9e9f936b9968f53be22b594aafa74f_r.jpg',
    time: '2025-02-02',
  },
  {
    id: 1,
    goodsName: '夏季养生需要注意的事项有哪些，不要贪凉',
    goodsPhoto:
      'https://pic4.zhimg.com/v2-4d9e9f936b9968f53be22b594aafa74f_r.jpg',
    time: '2025-02-02',
  },
])
onBeforeMount(async () => {})
const gob = () => {
  // router.push({ path: '/vip' }) 
  // https://beian.miit.gov.cn
  window.open('https://beian.miit.gov.cn','_blank')
}
</script>
  <style scoped lang='less'>
.kjk {
  width: 100%;
  height: 100vh;
  position: relative;
  .header {
    text-align: center;
    margin: 0;
    padding: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    text-align: center;
    font-style: normal;
    height: 60px;
  }
  .cont {
    width: 100%;
    height: calc(100vh - 90px);
    overflow-y: auto;
    .itemContainer {
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      .fr {
        flex-direction: column;
        justify-content: space-between;
        margin-left: 16px;
        .img80 {
          border-radius: 10px;
        }
      }
    }
    .my-swipe {
      .swipeItem {
        height: 160px;
        .imgc {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .ymba{
    text-align: center;
    font-size: 16px;
  }
}
</style>